<template>
  <d2-container>
    <el-table :data="tableData" style="width: 100%" stripe size="mini" v-loading="loading">
      <el-table-column prop="menuTitle" label="菜单名称">
      </el-table-column>
      <el-table-column prop="menuPath" label="菜单链接">
      </el-table-column>
      <el-table-column prop="menuOrder" label="菜单排序">
      </el-table-column>
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button size="mini" type="success" plain @click="onUpdateMenu(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
     <el-pagination background  :page-size="page.size"   layout="prev, pager, next"
      :total="page.total"  @size-change="handleSizeChange" :current-page.sync="currentPage"  @current-change="handleCurrentChange">
    </el-pagination>
    </template>

    <dialogMenuModify ref="dialogMenuModify" @menuChanged="menuChange"></dialogMenuModify>
  </d2-container>
</template>
<script>
//1.将请求对象加载进页面
import { mapActions } from 'vuex'
import { PAGE_SIZE } from "@/const"
export default {
  mounted() {
    //页面初始化完毕时,执行该事件,数据初始化应该写在这里
   this.bindData()
  },
  data() {
    return {
      loading: false,
      formData: {},
      tableData: [
        // { id: "1", menuTitle: "角色管理", menuPath: "/sys/rule", menuOrder: 1 },
        // { id: "2", menuTitle: "菜单管理", menuPath: "/sys/menu", menuOrder: 2 },
        // { id: "3", menuTitle: "用户管理", menuPath: "/sys/user", menuOrder: 3 },
      ],
      currentPage:5,
      
      page :{
        size:PAGE_SIZE,
        total:0,
        index:1
      },
    };
  },
  methods: {
    ...mapActions('pms/sys.menu',['getPage']),
    onUpdateMenu(row) {
      this.$refs.dialogMenuModify.showDialog(row)
      
    },
    menuChange(){
      this.bindData()
    },
    bindData(){
      this.loading=true,
      this.getPage({page:this.page}).then((res)=>{
          console.log(this.page.total)
          console.log(this.page.size)
          console.log(this.page.index)
          this.tableData=res.data
          this.page=res.page
          this.loading=false
      })
      
    },
    handleSizeChange(val) {
      this.page.index=val
      this.bindData()
        
    },
    handleCurrentChange(val) {
      this.page.index=val
      this.bindData()
    }
   
  },
  components:{
    dialogMenuModify:() => import("./dialog-menu-modify"),
  }
};
</script>